<#include "../common/_header.htm">
<div id="hidebox" style="height:100%;width:100%">
    <div class="fileContent" id="fileContent">
        <div class="fileDetail">
            <div class="filePhoto"><img class="photoPer" src="../../../imgs/card.png" onerror="javascript:this.src='../../../imgs/renyuan.png';" alt=""></div>
            <ul class="fileInfomu">
                <li id="accountBodyCard"></li>
                <li id="accountBody"></li>
                <li id="idNumber"></li>
            </ul>
            <ul class="fileInfomue">
                <li id="openBank"></li>
                <li id="bankAddress"></li>
            </ul>
        </div>
        <div class="fileAccount" id="fileAccountId" style="width:92%">
            <div class="filecont">
                <div class="fileAccountTitle">交易统计</div>
                <div class="moreDetailBtn" onClick="moreDetailDialog()"> 查看更多
                    <span class="glyphicon glyphicon-menu-right" aria-hidden="true"></span>
                </div>
            </div>
            <div class="fileAccountTable">
            	<table id="cardTable" class="table table-bordered table-striped table-hide">
            	  <tr>
                        <th>交易主体</th>
                        <th>交易主体卡号</th>
                        <th>交易对手</th>
                        <th>交易总金额</th>
                        <th>交易总次数</th>
                    </tr>
            	</table>
            </div>
        </div>
        <div class="fileAccount" id="fileAccountId" style="width:92%">
            <div class="filecont">
                <div class="fileAccountTitle">流入统计</div>
                <div class="moreDetailBtn" onClick="moreInDetailDialog()"> 查看更多
                    <span class="glyphicon glyphicon-menu-right" aria-hidden="true"></span>
                </div>
            </div>
            <div class="fileAccountTable">
            	<table id="cardInTable" class="table table-bordered table-striped table-hide">
            		<tr>
                        <th>交易对手</th>
                        <th>交易对手卡号</th>
                        <th>流入总金额</th>
                        <th>流入总次数</th>
                    </tr>
            	</table>
            </div>
        </div>
        <div class="fileAccount" id="fileAccountId" style="width:92%">
            <div class="filecont">
                <div class="fileAccountTitle">流出统计</div>
                <div class="moreDetailBtn" onClick="moreOutDetailDialog()"> 查看更多
                    <span class="glyphicon glyphicon-menu-right" aria-hidden="true"></span>
                </div>
            </div>
            <div class="fileAccountTable">
            	<table id="cardOutTable" class="table table-bordered table-striped table-hide">
            		<tr>
                        <th>交易对手</th>
                        <th>交易对手卡号</th>
                        <th>流出总金额</th>
                        <th>流出总次数</th>
                    </tr>
            	</table>
            </div>
        </div>
        <div class="personalInfo">
            <ul class="personalInfomu">
                <li id="li1"><a href="#fileTagId">标签</a></li>
                <li id="li2"><a href="#fileAccountId">交易统计</a></li>
                <li id="li3"><a href="#filePhoneId">流入统计</a></li>
                <li id="li4"><a href="#filePhoneId1">流出统计</a></li>
            </ul>
        </div>
    </div>
</div>
<script>
   	/** 回去传值 **/
   	var dialog = top.dialog.get(window);
    var accountBodyCard = dialog.data.accountBodyCard; // 获取对话框传递过来的数据
    var level = dialog.data.level; // 获取对话框传递过来的数据
    var caseId = dialog.data.caseId;
    $(function(){
        var data = {"accountBodyCard" : accountBodyCard,"showNumber" : "6" , "level" : level,"caseId" : caseId};
        $.ajax({
		    url : '${ctx}/bill/stream/d3/getPersonInformation',
		    type : 'post',
		    async : true,
		    contentType : "application/json;charset=UTF-8",
		    data : JSON.stringify(data),
		    dataType : 'json',
		    success : function (obj) {
		    	if(obj.code == 20000){
		    		if(null != obj.data.ds){
			    		var accountBodyCard = obj.data.ds.accountBodyCard == null ? '' : obj.data.ds.accountBodyCard;//卡号
			    		var accountBody = obj.data.ds.accountBody == null ? '' : obj.data.ds.accountBody;//户名
			    		var idNumber = obj.data.ds.idNumber == null ? '' : obj.data.ds.idNumber;//身份证号
			    		var accountBodyBank = obj.data.ds.accountBodyBank == null ? '' : obj.data.ds.accountBodyBank;//开户行
			    		var accountAddress = obj.data.ds.accountAddress == null ? '' : obj.data.ds.accountAddress;//银行归属地
			    		$("#accountBodyCard").text("卡号："+accountBodyCard);
			    		$("#accountBody").text("户名："+accountBody);
			    		$("#idNumber").text("身份证号："+idNumber);
			    		$("#openBank").text("开户行："+accountBodyBank);
			    		$("#bankAddress").text("银行归属地："+accountAddress);
		    		}
		    		//交易详情
		    		var cardTable = $("#cardTable");
		    		var _cardsHtml = '';
		    		if(obj.data.cardsTransMap != null && obj.data.cardsTransMap.length > 0){
		    			$.each(obj.data.cardsTransMap,function(index,value) {
			    			var ACCOUNT_BODY = value.ACCOUNT_BODY == null ? '' : value.ACCOUNT_BODY;
			    			var ACCOUNT_BODY_CARD = value.ACCOUNT_BODY_CARD == null ? '' : value.ACCOUNT_BODY_CARD;
			    			var ACCOUNT_RIVAL = value.ACCOUNT_RIVAL == null ? '' : value.ACCOUNT_RIVAL;
			    			var SUM_ACCOUNT_MONEY = value.SUM_ACCOUNT_MONEY == null ? '' :value.SUM_ACCOUNT_MONEY;
			    			var TRANS_NUM = value.TRANS_NUM == null ? '' :value.TRANS_NUM;
			    			_cardsHtml +="<tr>";
			    			_cardsHtml +="<td>"+ ACCOUNT_BODY +"</td>";
				    		_cardsHtml +="<td>"+ ACCOUNT_BODY_CARD +"</td>";
					        _cardsHtml +="<td>"+ ACCOUNT_RIVAL +"</td>";
						    _cardsHtml +="<td>"+ SUM_ACCOUNT_MONEY +"</td>";
						    _cardsHtml +="<td>"+ TRANS_NUM +"</td>";
						    _cardsHtml +="</tr>";
			    		});
		    		}else{
		    			_cardsHtml += "<tr><td colspan='5' style='text-align:center'>未查询出结果</td><tr>";
		    		}
		    		cardTable.append(_cardsHtml);
		    		//流入统计
		    		var cardInTable = $("#cardInTable");
		    		var _cardsInHtml = '';
		    		if(obj.data.cardsInTransMap != null && obj.data.cardsInTransMap.length > 0){
			    		$.each(obj.data.cardsInTransMap,function(index,value) {
			    			var ACCOUNT_RIVAL = value.ACCOUNT_RIVAL == null ? '' : value.ACCOUNT_RIVAL;
			    			var ACCOUNT_RIVAL_CARD = value.ACCOUNT_RIVAL_CARD == null ? '' : value.ACCOUNT_RIVAL_CARD;
			    			var INMONEY = value.INMONEY == null ? '' : value.INMONEY;
			    			var INNUMBER = value.INNUMBER == null ? '' :value.INNUMBER;
			    			_cardsInHtml +="<tr>";
			    			_cardsInHtml +="<td>"+ ACCOUNT_RIVAL +"</td>";
			    			_cardsInHtml +="<td>"+ ACCOUNT_RIVAL_CARD +"</td>";
			    			_cardsInHtml +="<td>"+ INMONEY +"</td>";
			    			_cardsInHtml +="<td>"+ INNUMBER +"</td>";
			    			_cardsInHtml +="</tr>";
			    		});
		    		}else{
		    			_cardsInHtml += "<tr><td colspan='4' style='text-align:center'>未查询出结果</td><tr>";
		    		}
		    		cardInTable.append(_cardsInHtml);
		    		//流入统计
		    		var cardOutTable = $("#cardOutTable");
		    		var _cardsOutHtml = '';
		    		if(obj.data.cardsInTransMap != null && obj.data.cardsInTransMap.length > 0){
			    		$.each(obj.data.cardsInTransMap,function(index,value) {
			    			var ACCOUNT_RIVAL = value.ACCOUNT_RIVAL == null ? '' : value.ACCOUNT_RIVAL;
			    			var ACCOUNT_RIVAL_CARD = value.ACCOUNT_RIVAL_CARD == null ? '' : value.ACCOUNT_RIVAL_CARD;
			    			var OUNMONEY = value.OUNMONEY == null ? '' : value.OUNMONEY;
			    			var OUTNUMBER = value.OUTNUMBER == null ? '' :value.OUTNUMBER;
			    			_cardsOutHtml +="<tr>";
			    			_cardsOutHtml +="<td>"+ ACCOUNT_RIVAL +"</td>";
			    			_cardsOutHtml +="<td>"+ ACCOUNT_RIVAL_CARD +"</td>";
			    			_cardsOutHtml +="<td>"+ OUNMONEY +"</td>";
			    			_cardsOutHtml +="<td>"+ OUTNUMBER +"</td>";
			    			_cardsOutHtml +="</tr>";
			    		});
		    		}else{
		    			_cardsOutHtml += "<tr><td colspan='4' style='text-align:center'>未查询出结果</td><tr>";
		    		}
		    		cardOutTable.append(_cardsOutHtml);
		    	}
		    }
		});
        var url = window.location.href;
        let s=url.split("#")[1]?"a":url.split("#")[1];
        if (s=="a"){
            $("#li1").css("background","#4695ED")
        }
        let aheight=$("#fileAccountId").outerHeight(true)
        let bheight=$("#filePhoneId").outerHeight(true)+aheight
        let cheight=$("#filePhoneId1").outerHeight(true)+bheight
        let dheight=$("#filePhoneId2").outerHeight(true)+cheight
        let eheight=$("#filePhoneId3").outerHeight(true)+dheight
        let fheight=$("#filePhoneId4").outerHeight(true)+eheight
        let gheight=$("#filePhoneId5").outerHeight(true)+fheight
        let hheight=$("#filePhoneId6").outerHeight(true)+gheight
        let iheight=$("#filePhoneId7").outerHeight(true)+hheight
        let i=0
        $("#hidebox").scroll(function() {
            let top=$("#hidebox").scrollTop()
            if (top<aheight) {
                $(".personalInfomu li").css("background","#fff")
                $("#li1").css("background","#4695ED")
            }else if (top<bheight){
                $(".personalInfomu li").css("background","#fff")
                $("#li2").css("background","#4695ED")
            } else if (top<cheight){
                $(".personalInfomu li").css("background","#fff")
                $("#li3").css("background","#4695ED")
            }else if (top<dheight){
                $(".personalInfomu li").css("background","#fff")
                $("#li4").css("background","#4695ED")
            }else if (top<eheight){
                $(".personalInfomu li").css("background","#fff")
                $("#li5").css("background","#4695ED")
            }else if (top<fheight){
                $(".personalInfomu li").css("background","#fff")
                $("#li6").css("background","#4695ED")
            }else if (top<gheight){
                $(".personalInfomu li").css("background","#fff")
                $("#li7").css("background","#4695ED")
            }else if (top<hheight){
                $(".personalInfomu li").css("background","#fff")
                $("#li8").css("background","#4695ED")
            }else if (top<iheight){
                $(".personalInfomu li").css("background","#fff")
                $("#li9").css("background","#4695ED")
            }else if (top<gheight){
                $(".personalInfomu li").css("background","#fff")
                $("#li10").css("background","#4695ED")
            }
        });
        $('.personalInfomu li').click(function(){
            $('.personalInfomu li').removeClass("fileActive");
            $(this).addClass("fileActive");
        });
	});
    //交易统计详情
    function moreDetailDialog(){
        var param = {};
        param.accountBodyCard = accountBodyCard;
        param.level = level;
        param.caseId=caseId;
        var d = top.dialog({
            title : '交易详情',
            modal : true,
            url : '${ctx}/bill/stream/d3/moreCardTransDetailDialogInit',
            height : 800,
            width : 1500,
            data : param
        });
        d.show();
        return false;
    }
    //流入交易统计详情
    function moreInDetailDialog(){
        var param = {};
        param.accountBodyCard = accountBodyCard;
        param.level = level;
        param.caseId = caseId;
        var d = top.dialog({
            title : '流入交易详情',
            modal : true,
            url : '${ctx}/bill/stream/d3/moreCardInTransDetailDialogInit',
            height : 800,
            width : 1500,
            data : param
        });
        d.show();
        return false;
    }
    //流出交易统计详情
    function moreOutDetailDialog(){
        var param = {};
        param.accountBodyCard = accountBodyCard;
        param.level = level;
        param.caseId = caseId;
        var d = top.dialog({
            title : '流出交易详情',
            modal : true,
            url : '${ctx}/bill/stream/d3/moreCardOutTransDetailDialogInit',
            height : 800,
            width : 1500,
            data : param
        });
        d.show();
        return false;
    }
</script>
<style>
	img.photoPer {
	    width: 100px;
	    height: 100px;
	}
    .moreDetailBtn:hover {
        background-color: #ccd0d7;
        border-radius: 5px 5px 5px 5px;
    }
    .personalInfomu {
        position: relative;
        background-color: #f6f9fa;
        border: 1px solid #e5e9ef;
        overflow: hidden;
        border-radius: 4px;
        padding-left: 0;
    }
    #hidebox {
        top: 23px;
        left: 2%;
        border-radius: 5px;
        background-color:#fff;
        z-Index:9999;
        padding: 10px;
        overflow-y: scroll;
    }
    .fileDetail{
        width: 100%;
        height: 160px;
        padding: 0 20px 0 30px;
    }
    .filePhoto{
        float: left;
    }
    .fileInfomu,.fileInfomue{
        float: left;
    }
    ul.fileInfomu {
        margin-right: 260px;
        margin-left: 106px;
    }
    .fileInfomu li,
    .fileInfomue li{
        margin-bottom: 12px;
        font-size: 15px;
    }
    .fileTagmu{
        padding-left: 0;
    }
    .fileTagTitle,
    .fileAccountTitle,
    .filePhoneTitle{
        font-size: 18px;
        color: #6BA8F0;
        margin-bottom: 10px;
        float: left;
    }
    .moreDetailBtn{
        width: 90px;
        height: 30px;
        float: right;
        margin-right: 7px;
        line-height: 30px;
        text-align: center;
        color: #555;
        border: 1px solid #CCD0D7;
        cursor: pointer;
        transition: all .2s;
        border-radius: 5px 5px 5px 5px;
    }
    span.glyphicon.glyphicon-menu-right {
        color: #555;
        font-size: 11px;
    }
    .fileTagmu li{
        position: relative;
        float: left;
        min-width: 90px;
        height: 24px;
        line-height: 24px;
        text-align: center;
        color: white;
        background-color: deeppink;
        border-radius: 15px 50px 50px 15px;
        padding: 0px 15px;
        margin-right: 12px;
    }
    /*.arrow {
        content: "";
        height: 0px;
        width: 0px;
        border-width: 12px;
        border-style: solid;
        border-color: transparent transparent transparent deeppink;
        position: absolute;
        right: -24px;
    }*/
    .tagCircle{
        width: 6px;
        height: 6px;
        background-color: #fff;
        border-radius: 5px;
        position: absolute;
        right: 8px;
        top: 9px;
        z-index: 1;
    }
    .fileAccount,
    .filePhone{
        margin-top: 20px;
    }
    .personalInfo{
        position: fixed;
        top: 165px;
        right: 40px;
    }
    .personalInfomu li {
        height: 30px;
        width: 90px;
        text-align: center;
        line-height: 30px;
    }
    .filecont{
        overflow: hidden;
    }
    .personalInfomu a{
        color: black;
    }
</style>
</body>
</html>